<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>14-await底层原理</title>
</head>

<body>
  <!-- 
    若使用 async配合 await这种写法：
      1.表面上不会出现任何回调函数；
      2.但实际上底层把我们写的代码进行了加工，把回调函数“还原”回来；
      3.最终运行的代码依然是有回调，只是程序员不可见。

    注意：ES2022 开始，允许在模块的顶层（即模块的最外层作用域）独立使用`await`命令
    模块顶层 await 会使异步任务阻塞主线程，变成同步任务，所以要慎用！！！
   -->

  <script type="module">
    const promise = new Promise((resolve, reject) => {
      console.log('开启异步任务----');
      setTimeout(() => {
        resolve('成功的value');
      }, 3000);
    });
    /* //程序员使用 async配合 await 将异步调用写成同步的方式 
    (
      async () => {
        try
        {
          const result = await promise
          console.log(result)
          console.log('异步代码执行----hello')
          console.log('异步代码执行----world')
        } catch (error)
        {
          console.log(error);
        };
      }
    )()
    console.log('主线程代码执行---------'); */
    /* 上面代码执行结果：
        开启异步任务----
        主线程代码执行---------
        成功的value
        异步代码执行----hello
        异步代码执行----world
    */

    /* //实际在浏览器中运行的代码(等同效果)
    promise.then(
      (value) => {
        console.log('成功的value：', value);
        console.log('异步代码执行----hello');
        console.log('异步代码执行----world');
      }
    ).catch((reason) => { console.log('失败原因：', reason); })

    console.log('主线程代码执行---------'); */


    // 模块顶层 await 会使异步任务阻塞主线程，变成同步任务，所以要慎用！！！
    try
    {
      const result = await promise
      console.log(result)
      console.log('异步代码执行----hello')
      console.log('异步代码执行----world')
    } catch (error)
    {
      console.log(error);
    };
    console.log('主线程代码执行---------');

    /* 上面代码执行结果：
        开启异步任务----
        成功的value
        异步代码执行----hello
        异步代码执行----world
        主线程代码执行---------
      */


  </script>
</body>

</html>